<template>
  <view class="accountInformationContent">
    <commonNavBar title="我的" ></commonNavBar>
    <view class="centre">
      <view class="box">
        <view class="li">
          <view class="title">姓名</view>
          <view class="content">{{ name }}</view>
        </view>
        <view class="li">
          <view class="title">所属辖区</view>
          <view class="content">{{ jurisdiction }}</view>
        </view>
        <view class="li">
          <view class="title">单位</view>
          <view class="content">{{ unit }}</view>
        </view>
        <view class="li">
          <view class="title">职务</view>
          <view class="content">{{ duties }}</view>
        </view>
        <view class="li">
          <view class="title">电话</view>
          <view class="content">{{ phone }}</view>
        </view>
      </view>
      <view class="button">
        <button @click="logout">退出登录</button>
      </view>
    </view>
  </view>
</template>

<script>
import commonNavBar from '@/components/CommonNavBar.vue';
	
export default {
	components:{
		commonNavBar
   },
  data() {
    return {
      title: '-',
      name: '-',
      jurisdiction: '-',
      unit: '-',
      duties: '-',
      phone: '-'
    }
  },
  onLoad(options) {
    this.listData()
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    async logout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录么?',
        success: (res) => {
          if (res.confirm) {
            try {
              uni.$api.loginOut().then(res => {
                if(res.data.code === 0) {
                  uni.showToast({
                    title: '退出成功',
                    icon: 'success',
                    image: '/static/img/success.png',
                    duration: 2000,
                  });
                  uni.removeStorageSync(uni.$Call.token)
                  setTimeout(function() {
                    // 跳转到登录页面
                    uni.reLaunch({
                      url: '/pages/land/land'
                    });
                  }, 2000);
                }
              });

            } catch (error) {
              console.error(error)
            }
          }
        }
      })

    },
    async listData() {
      try {
        const res = await uni.$api.getMyUserInfo();
        console.log('res', res)
        if(res.data.code === 0) {
          this.name = res.data.data.userName
          this.jurisdiction = res.data.data.areaName
          this.unit = res.data.data.deptName
          this.duties = res.data.data.positionName
          this.phone = res.data.data.mobile
          uni.setStorageSync('userName', res.data.data.userName);
        }
      } catch (error) {
        console.error(error)
      }
    }
  }
}
</script>

<style lang="scss">
.accountInformationContent {
  background: #F9F9F9; 
  
  .centre {
    padding: 50rpx 17.5rpx 0 17.5rpx;
    height: calc(100vh - 165rpx);
    overflow-x: hidden;
    display: flex;
    flex-direction: column;

    .box {
      background: #FFFFFF;
      box-shadow: 0rpx 0rpx 34rpx 0rpx rgba(0, 0, 0, 0.05);
      border-radius: 18rpx;
      margin: 25rpx 0 0 25rpx;
      // padding: 38rpx 35rpx 35rpx 38rpx;
      padding: 0rpx 35rpx 0rpx 38rpx;

      .li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 2rpx solid #DCDCDC;
        height: 106rpx;

        .title {
          font-size: 21rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
        }

        .content {
          font-size: 21rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
        }

        &:last-child {
          border: none;
        }
      }
    }

    .button {

      button {
        width: 537rpx;
        height: 94rpx;
        line-height: 94rpx;
        background: #E94E40;
        border-radius: 47rpx;
        backdrop-filter: blur(3px);
        font-size: 21rpx;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        margin: 38rpx auto;
      }
    }
  }
}
</style>